<template>
    <div class="id-upload-container">
{{ fileList }}
    <div v-for="(item, index) in fileList" :key="index"> 
        <el-upload
        :show-file-list="false"
        :auto-upload="false"
        :before-upload="beforeUpload"
        :on-change="handleChange"
         >
        <!-- 未上传状态：显示加号图标 -->
        <div v-if="!item.url" class="upload-trigger">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </div>
        
        <!-- 已上传状态：显示图片+删除按钮 -->
        <div v-else class="preview-container">
          <img :src="item.url" class="id-preview" alt="身份证预览">
          <i class="el-icon-close delete-btn" @click.stop="handleDelete()"></i>
        </div>

      </el-upload>
      <div class="upload-tip">{{ tip }}</div>
    </div>
      
     </div> 
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  import { ElMessage } from 'element-plus';
  

  const props = defineProps({
    fileList: { 
      type: Array, 
      default: () => [] 
    },
    tip: { type: String, default: '上传' },
    maxSize: { type: Number, default: 2 }, // 单位MB
    acceptTypes: { 
      type: Array, 
      default: () => ['image/jpeg', 'image/png', 'image/jpg'] 
    }
  });
  
  const emits = defineEmits(['update:modelValue', 'upload-success', 'delete']);
  
  const imageUrl = ref('');
  const fileRaw = ref(null);
  
  // 文件验证（格式+大小）
  const beforeUpload = (file) => {
    const isValidType = props.acceptTypes.includes(file.type);
    const isValidSize = file.size / 1024 / 1024 < props.maxSize;
    
    if (!isValidType) {
      ElMessage.error(`仅支持 ${props.acceptTypes.join('/')} 格式`);
      return false;
    }
    
    if (!isValidSize) {
      ElMessage.error(`文件大小不能超过 ${props.maxSize}MB`);
      return false;
    }
    
    return true;
  };
  
  // 文件选择处理
  const handleChange = (file) => {
    if (!file.raw) return;
    
    // 生成预览图
    imageUrl.value = URL.createObjectURL(file.raw);
    fileRaw.value = file.raw;
    
    // 触发上传事件
    emits('upload-success', file.raw);
  };
  
  // 删除处理
  const handleDelete = (e) => {
    console.log("--->delete")
    console.log(e)
    e.stopPropagation();

    imageUrl.value = '';
    fileRaw.value = null;
    emits('delete');
  };
  
  // 清理内存
  watch(() => imageUrl.value, (newVal, oldVal) => {
    if (oldVal && oldVal.startsWith('blob:')) {
      URL.revokeObjectURL(oldVal);
    }
  });
  </script>
  
  <style scoped>
  .id-upload-container {
    position: relative;
    display: inline-block;
  }
  
  /* 加号上传区域 */
  .upload-trigger {
    width: 90px;
    height: 60px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #fafafa;
  }
  
  .avatar-uploader-icon {
    font-size: 32px;
    color: #8c939d;
  }
  
  /* 预览图容器 */
  .preview-container {
    position: relative;
    width: 90px;
    height: 60px;
  }
  
  /* 身份证预览图 */
  .id-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #ebeef5;
    border-radius: 6px;
  }
  
  /* 右上角删除按钮 */
  .delete-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    color: #f56c6c;
    font-size: 16px;
    z-index: 1;
  }
  
  .delete-btn:hover {
    background: #f56c6c;
    color: white;
  }
  
  .upload-tip {
    margin-top: 8px;
    font-size: 12px;
    color: #909399;
    text-align: center;
  }
  </style>